<template>
  <div class="incomeList">
    <div id="myEchart" v-if="account!==0">
    </div>
    <p id="myEchart-item">{{year}}年{{month}}月总共收入{{account}}元</p>
    <div class="incomeList-list">
      <div class="incomeList-header" v-bind:style="listItem">
        <p>{{title}}。（点击上图可查询各收入分类的记录）</p>
      </div>
      <ul>
        <li v-for="data in incomeList" v-on:click="checkDetail($event)">
          <div class="list-logo" v-bind:class="data.category_logo" v-bind:style="listLogo"></div>
          <div class="incomeList-content">
            <p>{{data.incomeCategory.split('>')[1].toString()}}</p>
            <p class="incomeList-date">{{data.incomeDate}} {{data.incomeTime}}</p>
            <p class="incomeList-other">
              <strong>备注</strong>：{{data.description==''?'暂无':data.description}}<br>
              <strong>类型</strong>：{{data.incomeAccount}}<br><i v-bind:class="data.account_logo"></i>
            </p>
          </div>
          <div class="incomeList-money">{{data.incomeMoney}}元</div>
        </li>
        <li class="incomeList-empty" v-show="incomeList.length===0">
          <i class="fa fa-exclamation-triangle fa-3x"></i><br>
          本月好像没有记录什么消费哦
        </li>
        <li class="incomeList-end" v-show="isEmpty">( ¯▽¯；)没有啦</li>
      </ul>
    </div>
    <dialogBox v-bind:message="error" v-bind:href="location" id="dialog"></dialogBox>
    <selectMonth v-on:resultDate='changeMonth'></selectMonth>
    <backTop></backTop>
  </div>
</template>

<script>
    import dialogBox from '../public/dialog-box/dialog-box.vue'
    import backTop from '../public/backTop/backTop.vue'
    import selectMonth from '../public/selectMonth/selectMonth.vue'
    export default {
        name: '',
        data () {
            return {
              account:0,    //记录本月收入总和
              error:'',
              location:'',
              incomeMoneyJson:{   //各种收入种类的总和
                wage:0,
                interest:0,
                overtime:0,
                bonus:0,
                investment:0,
                parttime:0,
                gift:0,
                winning:0,
                accident:0,
                business:0
              },
              title:'本月最新收入',   //列表标题
              listItem:{
                'border-bottom-color':'lightgreen'
              },
              listLogo:{
                'background-color':'lightgreen'
              },
              isEmpty:false,  //请求是否为空，是为true
              year:new Date().getFullYear(),
              month:new Date().getMonth()+1,
              limit:5,
              start:0,
              incomeList:[]     //显示消费信息列表的数据
            }
        },
        components:{dialogBox,backTop,selectMonth},
        mounted:function () {
           $('#dialog').hide();
           this.requestAccount();
           this.slideBottom();

          $('#incomePage').addClass('clicked');
          $('#incomePage').siblings().removeClass('clicked');
      },
        methods:{
        initPie:function () { //初始化饼状图
          let that=this;
          let myChart=echarts.init(document.getElementById('myEchart'));
          myChart.setOption(
            {
              title:{
                text:'本月收入记录汇总',
                textStyle:{
                  fontSize:15,
                  fontWeight:400
                }
              },
              legend: {
                orient: 'vertical',
                x:'left',
                bottom:0,
                itemGap:5,
                selectedMode:true,
                data:['工资收入','利息收入','加班收入','奖金收入','投资收入','兼职收入','礼金收入','中奖收入','意外来财','经营所得']
              },
              tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
              },
              series: [
                {
                  name:'本月收入汇总',
                  type:'pie',
                  radius: ['50%', '75%'],
                  center:['60%','50%'],
                  avoidLabelOverlap: false,
                  label: {
                    normal: {
                      show: false,
                      position: 'center'
                    },
                    emphasis: {
                      show: true,
                      textStyle: {
                        fontSize: '15',
                        fontWeight: 'bold'
                      }
                    }
                  },
                  labelLine: {
                    normal: {
                      show: false
                    }
                  },
                  data:[
                    {value:that.incomeMoneyJson.wage, name:'工资收入'},
                    {value:that.incomeMoneyJson.interest, name:'利息收入'},
                    {value:that.incomeMoneyJson.overtime, name:'加班收入'},
                    {value:that.incomeMoneyJson.bonus, name:'奖金收入'},
                    {value:that.incomeMoneyJson.investment, name:'投资收入'},
                    {value:that.incomeMoneyJson.parttime, name:'兼职收入'},
                    {value:that.incomeMoneyJson.gift, name:'礼金收入'},
                    {value:that.incomeMoneyJson.winning, name:'中奖收入'},
                    {value:that.incomeMoneyJson.accident, name:'意外来财'},
                    {value:that.incomeMoneyJson.business, name:'经营所得'}
                  ]
                },
//                    {
//                      name:'食品酒水',
//                      type:'pie',
//                      selectedMode: 'single',
//                      radius : [0, '50%'],
//                      itemStyle : {
//                        normal : {
//                          label : {
//                            position : 'inner'
//                          },
//                          labelLine : {
//                            show : false
//                          }
//                        }
//                      },
//                      data:[
//                        {value:500, name:'早午晚餐'},
//                        {value:100, name:'烟酒茶'},
//                        {value:300, name:'水果零食'}
//                      ]
//                    },
              ],
              color:['#0099FF','#0099CC','#009999','#009966','#009933','#009900','#0066FF','#0066CC','#006699','#006666']
            });
          myChart.off('click');
          myChart.on('click',function (params) {
            that.start=0;
            that.incomeList=[];
            that.isEmpty=false;
            that.requestEachIncomeCategory(params.name,that.limit,that.start);
            that.title=params.name;
            that.listItem['border-bottom-color']=params.color;
            that.listLogo['background-color']=params.color;
          })
        },
        requestAccount:function () {
          let that=this;
          let year=that.year;
          let month=that.month;
          this.$ajax.get('/api/accountIncome',{
            params:{
              date:year+'-'+month,
              token:sessionStorage.getItem('token'),
              user_id:sessionStorage.getItem('id'),
            }
          }).then(function (response) {
            that.account=response.data.result.resultAccount;
            that.incomeMoneyJson.wage=response.data.result.incomeMoneyJson.wage;
            that.incomeMoneyJson.interest=response.data.result.incomeMoneyJson.interest;
            that.incomeMoneyJson.overtime=response.data.result.incomeMoneyJson.overtime;
            that.incomeMoneyJson.bonus=response.data.result.incomeMoneyJson.bonus;
            that.incomeMoneyJson.investment=response.data.result.incomeMoneyJson.investment;
            that.incomeMoneyJson.parttime=response.data.result.incomeMoneyJson.parttime;
            that.incomeMoneyJson.gift=response.data.result.incomeMoneyJson.gift;
            that.incomeMoneyJson.winning=response.data.result.incomeMoneyJson.winning;
            that.incomeMoneyJson.accident=response.data.result.incomeMoneyJson.accident;
            that.incomeMoneyJson.business=response.data.result.incomeMoneyJson.business;
          }).then(function () {
            that.initPie();
            that.requestIncomeList();
          }).catch(function (error) {
            if(error.response){
              that.error=error.response.data.error.message||error.response.data.error;
              that.location='/#/login'
              $('#dialog').show();
              $('#loading').hide();
            }
          })
        },
        requestIncomeList:function () {
          let that=this;
          let year=that.year;
          let month=that.month;
          this.$ajax.get('/api/incomeCategory',{
            params:{
              date:year+'-'+month,
              token:sessionStorage.getItem('token'),
              user_id:sessionStorage.getItem('id'),
            }
          }).then(function (response) {
            that.incomeList=response.data.result;
          }).catch(function (error) {
            if(error.response){
              that.error=error.response.data.error.message||error.response.data.error;
              that.location='/#/login'
              $('#dialog').show();
              $('#loading').hide();
            }
          })
        },
        requestEachIncomeCategory:function (name,limit,start) {
          let that=this;
          let year=that.year;
          let month=that.month;
          this.$ajax.get('/api/incomeEachCategory',{
            params:{
              date:year+'-'+month,
              token:sessionStorage.getItem('token'),
              user_id:sessionStorage.getItem('id'),
              incomeCategory:name,
              limit:limit,
              start:start
            }
          }).then(function (response) {
            if(response.data.result.length===0){
              that.isEmpty=true;
              that.start=0;  //目前由于太喜欢操作dom，用这个赋值方法可以避免start值随便自加
            }else{
              response.data.result.forEach(function (value,index) {
                that.incomeList.push(value);
              })
            }
          }).catch(function (error) {
            if(error.response){
              that.error=error.response.data.error.message||error.response.data.error;
              that.location='/#/login';
              $('#dialog').show();
              $('#loading').hide();
            }
          })
        },
        slideBottom:function () {
          let that=this;
          $(window).scroll(function () {
            let scrollTop = $(this).scrollTop();
            let scrollHeight = $(document).height();
            let windowHeight = $(this).height();
            if(scrollTop + windowHeight == scrollHeight&&that.isEmpty===false){
              that.start+=5;
              that.requestEachIncomeCategory(that.title,that.limit,that.start);
            }
          })
        },
        changeMonth:function (data) {
          let that=this;
          if(that.month!==1&&data===1){
            that.month-=1;
          }else if(that.month===1&&data===1){
            that.year-=1;
            that.month=12;
          } else if(that.month!==12&&data===0){
            that.month+=1;
          }else if(that.month===12&&data===0){
            that.year+=1;
            that.month=1;
          }
          that.incomeList=[];
          that.start=0;
          that.isEmpty=false;
          that.title='本月最新收入';
          that.listItem['border-bottom-color']='lightgreen';
          that.listLogo['background-color']='lightgreen';
          that.requestAccount();
        },
         checkDetail:function (e) {
            $(e.currentTarget).find('.incomeList-other').slideToggle();
            $(e.currentTarget).siblings().find('.incomeList-other').slideUp();
          }
      }
    }
</script>

<style>
  @import "../../assets/css/font-awesome.min.css";
  @import "css/incomeList.css";
</style>
